<template>
	<view>
		<Header :isBack="true">
			<block slot="content">{{title}}</block>
		</Header>

		<scroll-view scroll-y="true" v-if="isLoaded">
			<view class="title-box">
				<view class="title">
					<view class="title1">
						<view class="title1-left">{{company_name}}</view>
						<view class="title1-right">{{employee_num}}</view>
					</view>
					<image class="title-img" :src="logo"></image>
				</view>
			</view>

			<view class="address">
				<view class="address-title">
					公司地址
				</view>
				<view class="address-content">
					<text class="address-content-left">{{location}}</text>
					<view class="address-content-right" @tap="gps" v-if="location != '未知'">
						<image class="address-content-right-img" src="/static/images/miaobiandaohang.png" alt="">
						</image>
					</view>
				</view>
			</view>

			<view class="detail">
				<view class="detail-title">
					公司介绍
				</view>
				<view class="detail-content">{{description}}</view>
			</view>

			<view class="company">
				<view class="company-title">
					公司相册
				</view>
				<view class="company-content">
					<image class="company-content-img" src="/static/images/tu.png" alt=""></image>
				</view>

			</view>

		</scroll-view>


	</view>

</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				title: '',
				isLoaded: false,

				description: '未知',
				location: '未知',
				logo: '',
				company_name: '',
				latitude: 0,
				longitude: 0,
				address: '',
				employee_num: '未知',

				isShow: false,
			}
		},
		components: {

		},

		computed: {
			...mapState(['hasLogin'])
		},

		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.id = option.id
			uni.showLoading({
				title: '加载中...'
			});
			this.getInfo(this.id);
			this.isLoaded = true;
			uni.hideLoading();
		},
		methods: {
			async getInfo(id) {
				let comObj = await this.$myRequest({
					url: '/company/comInfo',
					data: {
						id: id,
						token: uni.getStorageSync('token')
					},
					methods: 'POST'
				})

				let comInfo = comObj.data.data;

				this.company_name = comInfo.company_name
				this.title = comInfo.company_name + '-简介'
				if (comInfo.employee_num > 0) {
					this.employee_num = comInfo.employee_num + '人'
				}

				this.logo = comInfo.logo ? comInfo.logo : '/static/images/company_logo.png'
				if (comInfo.location) {
					this.location = comInfo.location
				}
				if (comInfo.introduction) {
					this.description = comInfo.introduction
				}

				this.latitude = comInfo.lat
				this.longitude = comInfo.lng
				this.address = comInfo.address
			},

			//导航
			async gps() {
				//打开第三方地图
				let latitude = parseFloat(this.latitude); //要去的纬度-地址
				let longitude = parseFloat(this.longitude); //要去的经度-地址
				let name = this.address; //地址名称
				let url = "";
				if (plus.os.name == "Android") { //判断是安卓端
					plus.nativeUI.actionSheet({ //选择菜单
						title: "选择地图应用",
						cancel: "取消",
						buttons: [{
							title: "腾讯地图"
						}, {
							title: "百度地图"
						}, {
							title: "高德地图"
						}]
					}, function(e) {
						switch (e.index) {
							//下面是拼接url,不同系统以及不同地图都有不同的拼接字段
							case 1:
								//注意referer=xxx的xxx替换成你在腾讯地图开发平台申请的key
								url =
									`qqmap://map/geocoder?coord=${latitude},${longitude}&referer=VUHBZ-42PAP-EMLD3-VCORN-OO2J5-FIF2P`;
								break;
							case 2:
								url =
									`baidumap://map/marker?location=${latitude},${longitude}&title=${name}&coord_type=gcj02&src=andr.baidu.openAPIdemo`;
								break;
							case 3:
								url =
									`androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
								break;
							default:
								break;
						}
						if (url != "") {
							url = encodeURI(url);
							//plus.runtime.openURL(url,function(e){})调起手机APP应用
							plus.runtime.openURL(url, function(e) {
								plus.nativeUI.alert("本机未安装指定的地图应用");
							});
						}
					})
				} else {
					// iOS上获取本机是否安装了百度高德地图，需要在manifest里配置
					// 在manifest.json文件app-plus->distribute->apple->urlschemewhitelist节点下添加
					//（如urlschemewhitelist:["iosamap","baidumap"]）  
					plus.nativeUI.actionSheet({
						title: "选择地图应用",
						cancel: "取消",
						buttons: [{
							title: "高德地图"
						}, {
							title: "百度地图"
						}, {
							title: "腾讯地图"
						}]
					}, function(e) {
						switch (e.index) {
							case 1:
								url =
									`iosamap://viewMap?sourceApplication=applicationName&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
								break;
							case 2:
								url =
									`baidumap://map/marker?location=${latitude},${longitude}&title=${name}&content=${name}&src=ios.baidu.openAPIdemo&coord_type=gcj02`;
								break;
							case 3:
								url = `qqmap://map/geocoder?coord=${latitude},${longitude}&referer=xxx`;
								break;
							default:
								break;
						}
						if (url != "") {
							url = encodeURI(url);
							plus.runtime.openURL(url, function(e) {
								plus.nativeUI.alert("本机未安装指定的地图应用");
							});
						}
					})
				}

			},
		}
	}
</script>
<style>
	page {
		background-color: #f7f7f7;
		font-size: $font-base;
	}
</style>
<style lang='scss' scoped>
	.title-box {
		// #ifdef APP-PLUS
		padding-top: 160rpx;
		// #endif

		// #ifdef H5
		padding-top: 100rpx;
		// #endif

		.title {
			width: 100%;
			padding: 35rpx 44rpx 23rpx;
			background-color: #fff;
			display: flex;
			justify-content: space-between;

			.title1 {
				display: flex;
				flex-direction: column;
				align-items: left;
				padding: 15rpx 0;
				line-height: 45rpx;

				.title1-right {
					height: 45rpx;
					color: #545556;
				}
			}

			.title-img {
				width: 120rpx;
				height: 120rpx;
			}
		}

	}

	.title1-left,
	.address-title,
	.detail-title,
	.company-title {
		font-size: 30rpx;
		/* font-weight: bold; */

		height: 45rpx;
	}

	.address {
		width: 100%;
		padding: 31rpx 44rpx;
		background-color: #fff;
		line-height: 42rpx;
		position: relative;
		border-bottom: 1px solid #f3f3f6;

		.address-content {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.address-content-left {
				color: #545556;
				width: 60%;
			}

			.address-content-right {
				display: flex;
				align-items: center;

				.address-content-right-img {
					height: 60rpx;
					width: 124rpx;
				}
			}
		}
	}

	.detail {
		width: 100%;
		padding: 31rpx 44rpx;
		background-color: #fff;
		line-height: 42rpx;
		border-bottom: 1px solid #f3f3f6;

		.detail-content {
			color: #545556;
			text-indent: 2em;
			/*两端对齐*/
			text-align: justify;
		}
	}

	.company {
		width: 100%;
		padding: 31rpx 44rpx;
		background-color: #fff;
		position: relative;

		.company-content {

			.company-content-img {
				width: 100%;
			}
		}
	}
</style>
